<template>
  <div>
    <video ref="video" width="300" height="200" autoplay></video>
    <button @click="takePicture">Take Picture</button>
    <canvas ref="canvas" width="300" height="200" style="display: none;"></canvas>
    <button @click="uploadPicture">Upload Picture</button>
    <div>
      <img :src="photo" v-if="photo" alt="Captured Image" width="300" height="200">

      <img  :src="photoReturn" v-if="photoReturn"  width="300" height="200">
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      stream: null,
      photo: null,
      photoReturn:null
    };
  },
  mounted() {
    this.startCamera();
  },
  methods: {
    async startCamera() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
        this.$refs.video.srcObject = this.stream;
      } catch (error) {
        console.error('Error accessing the camera: ', error);
      }
    },
    takePicture() {
      const context = this.$refs.canvas.getContext('2d');
      context.drawImage(this.$refs.video, 0, 0, 300, 200);
      this.photo = this.$refs.canvas.toDataURL('image/png');
    },
    async uploadPicture() {
      try {
        // 使用 Axios 发送 POST 请求到 Flask 后端
        const response = await axios.post('http://localhost:5000/fall_detection', {
          file: this.photo
        });
       
        console.log('Upload successful: ', response.data);
      } catch (error) {
        console.error('Error uploading picture: ', error);
      }
    },
  },
  beforeDestroy() {
    if (this.stream) {
      this.stream.getTracks().forEach(track => {
        track.stop();
      });
    }
  }
};
</script>

<style scoped>
/* Add your own styles here */
</style>
